<!--
  @Descripttion:企业端-统计看板-实践项目
  @Author：yejianbo
  @Date：2023年04月03日
-->
<template>
  <div class="dashboard-editor-container">
    <el-card shadow="always" style="margin-bottom: 20px">
      <p class="ansy-title">招聘管理</p>
      <el-row type="flex" class="row-bg">
        <el-select
          v-model="productId"
          size="small"
          style="margin-right: 10px; width: 250px"
          filterable
          placeholder="请输入项目名称"
          :loading="loading"
          @change="handleChange"
        >
          <el-option
            v-for="item in productSelectList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-row>
      <el-row :gutter="32" style="padding-top: 20px">
        <el-col :span="3">
          <div class="item-title">
            项目浏览数
            <el-tooltip
              class="item"
              effect="dark"
              content="当前项目详情点击数和（UV）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ info.viewNum || 0 }}</div>
        </el-col>
        <!-- 报名数量 -->
        <el-col :span="3">
          <el-row>
            <div class="item-title">
              项目报名数
              <el-tooltip
                class="item"
                effect="dark"
                content="遴选阶段报名的个人、团队数量"
                placement="top"
              >
                <i class="icon-font el-icon-warning-outline" />
              </el-tooltip>
            </div>
            <div class="count-num">
              {{ info.entryNum1 || 0 }}
            </div>
          </el-row>
        </el-col>
        <!-- 初赛 -->
        <el-col :span="3">
          <el-row>
            <el-col :span="24" style="margin-bottom: 15px">
              <div class="item-title">
                初赛入选数
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="遴选阶段，入选的个人、团队数量"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ info.entryNum2 || 0 }}
              </div></el-col>
            <el-col :span="24">
              <div class="item-title">
                通过率
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="初赛阶段，入选的个人、团队的数量比例"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ getRadio(info.entryNum2, info.entryNum1) }}
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 复赛 -->
        <el-col :span="3">
          <el-row>
            <el-col :span="24" style="margin-bottom: 15px">
              <div class="item-title">
                复赛入选数
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="初赛阶段，入选的个人、团队数量"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ info.entryNum3 || 0 }}
              </div></el-col>
            <el-col :span="24">
              <div class="item-title">
                通过数
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="复赛阶段，入选的个人、团队的数量比例"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ getRadio(info.entryNum3, info.entryNum2) }}
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 决赛 -->
        <el-col :span="3">
          <el-row>
            <div class="item-title">
              决赛入选数
              <el-tooltip
                class="item"
                effect="dark"
                content="决赛阶段，入选的个人、团队数量"
                placement="top"
              >
                <i class="icon-font el-icon-warning-outline" />
              </el-tooltip>
            </div>
            <div class="count-num">
              {{ info.entryNum4 || 0 }}
            </div>
          </el-row>
        </el-col>
        <!-- 决赛获奖数量 -->
        <el-col :span="3">
          <el-row>
            <el-col :span="24" style="margin-bottom: 15px">
              <div class="item-title">
                获奖数
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="决赛阶段，获奖的个人、团队数量"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ info.entryNum5 || 0 }}
              </div></el-col>
            <el-col :span="24">
              <div class="item-title">
                获奖率
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="决赛阶段，获奖的个人、团队数量比例"
                  placement="top"
                >
                  <i class="icon-font el-icon-warning-outline" />
                </el-tooltip>
              </div>
              <div class="count-num">
                {{ getRadio(info.entryNum5, info.entryNum4) }}
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="always" style="margin-bottom: 20px">
      <el-row :gutter="14" style="margin-top: 14px">
        <el-col :span="12">
          <!-- <el-card shadow="always" class="chart-card">
          <p class="ansy-title no-margin">平台访问量</p>
          <line-chart height="310px" :chart-data="lineChartData" />
        </el-card> -->
          <el-card shadow="always" class="chart-card">
            <p class="ansy-title no-margin">项目访问量</p>
            <line-chart
              v-if="viewCountList !== null"
              ref="viewCountChart"
              height="310px"
            />
            <el-empty v-else description="暂无数据" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="chart-card">
            <p class="ansy-title no-margin">专业分布</p>
            <pie-chart
              v-if="majorCountList !== null"
              ref="majorCountChart"
              height="310px"
            />
            <el-empty v-else description="暂无数据" />
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="14" style="margin-top: 14px">
        <el-col :span="12">
          <el-card shadow="always" class="chart-card">
            <p class="ansy-title no-margin">个人团队比例</p>
            <pie-chart
              v-if="registerRadio !== null"
              ref="registerRadio"
              height="310px"
            />
            <el-empty v-else description="暂无数据" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import LineChart from './components/LineChart'
import PieChart from '@/views/components/PieChart'
import { getPraxisProjectCount } from './api'
import { projectSelectList } from '@/views/projectManageCompany/api'
export default {
  name: 'ProductAnalytics',
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      registerRadio: null, // 报名比例
      viewCountList: null,
      majorCountList: null,
      productSelectList: [],
      loading: false,
      productId: '',
      info: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      /**
       * 初始化
       * 1.查询当前企业内的所有未删除、未下架的项目
       * 2.默认选择第一个，查询该项目的数据概览
       */
      projectSelectList({
        queryType: 1
      }).then((res) => {
        if (res && res.code === 0) {
          console.log('getTableList res<<<<', res)
          this.productSelectList = res.data || []
          if (this.productSelectList.length) {
            this.productId = this.productSelectList[0].id
            this.getPraxisProjectCount(this.productId)
          }
        }
      })
    },
    handleChange(id) {
      this.getPraxisProjectCount(id)
    },
    /**
     * @desc 计算通过率比例,保留2位小数点
     * @param {Number} num1
     * @param {Number} num2
     * @return parseFloat(num1 / num2).toFixed(2)
     */
    getRadio(num1, num2) {
      if (!num1 || !num2) {
        return 0 + '%'
      }
      return parseFloat((num1 / num2) * 100).toFixed(2) + '%'
    },
    // 招聘情况统计
    getPraxisProjectCount(id) {
      this.loading = true
      getPraxisProjectCount({ id })
        .then((res) => {
          if (res.code === 0 && res.data) {
            console.log('getPraxisProjectCount res>>>', res.data)
            this.info = res.data
            // 浏览量
            if (
              res.data &&
              res.data.viewCountList &&
              Array.isArray(res.data.viewCountList) &&
              res.data.viewCountList.length
            ) {
              this.viewCountList = res.data.viewCountList
                .map((item) => {
                  return {
                    label: item.viewMonth,
                    value: item.num
                  }
                })
                .reverse()
              setTimeout(() => {
                this.$refs.viewCountChart &&
                  this.$refs.viewCountChart.initChart(this.viewCountList)
              })
            } else {
              this.viewCountList = null
            }
            // 专业分布
            if (
              res.data &&
              res.data.majorList &&
              Array.isArray(res.data.majorList) &&
              res.data.majorList.length
            ) {
              if (res.data.majorList.length < 15) {
                this.majorCountList = res.data.majorList.map((item, index) => {
                  return {
                    label: item.major,
                    value: item.num
                  }
                })
              } else {
                const majorList = res.data.majorList
                  .map((item, index) => {
                    return {
                      label: item.major,
                      value: index
                    }
                  })
                  .sort((a, b) => {
                    return Number(b.value) - Number(a.value)
                  })
                const data = majorList.slice(0, 15)
                const otherData = {
                  label: '其他',
                  value: 0
                }
                majorList.slice(15).map((item, index) => {
                  if (item.value && Number(item.value) > 0) {
                    otherData.value += Number(item.value)
                  }
                })
                this.majorCountList = [...data, otherData]
              }
              setTimeout(() => {
                this.$refs.majorCountChart &&
                  this.$refs.majorCountChart.initChart(this.majorCountList)
              })
            } else {
              this.majorCountList = null
            }
            // 个人、团队报名比例
            if (
              res.data &&
              typeof res.data.entryNumPerson === 'number' &&
              typeof res.data.entryNumTeam === 'number' &&
              (res.data.entryNumTeam !== 0 || res.data.entryNumPerson !== 0)
            ) {
              this.registerRadio = [
                {
                  label: '个人',
                  value: res.data.entryNumPerson
                },
                {
                  label: '团队',
                  value: res.data.entryNumTeam
                }
              ]
              setTimeout(() => {
                this.$refs.registerRadio.initChart(this.registerRadio)
              })
            } else {
              this.registerRadio = null
            }
          }
          this.loading = false
        })
        .catch((e) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/vars.scss";
.blue06 {
  color: $blue06;
}
.ansy-title {
  @include t14h22;
  font-weight: 600;
}
.m14 {
  margin-bottom: 14px;
}
.no-margin {
  margin: 0;
}
.item-title {
  @include t12h20;
}
.count-num {
  font-size: 22px;
  color: $blue06;
  line-height: 30px;
  span {
    color: #000;
    @include t12h20;
  }
}
.count-data {
  font-size: 12px;
  margin: 0;
  color: $blue06;
  font-weight: 600;
}
.greed {
  color: $green04;
}
.dashboard-editor-container {
  padding: 14px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;
  .chart-wrapper {
    background: #fff;
    padding: 14px 14px 0;
    margin-bottom: 14px;
  }
}

@media (flowmax-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
